<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .box {
    margin: 1000px auto;
    width: 800px;
    height: 500px;
    overflow: hidden;
    background-color: #ccc;
  }

  img {
    width: 100%;
    display: none;
  }
</style>

<body>
  <div class="box">
    <img src="" alt=""
      data-img="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091023%2F5bahqp4g4qh5bahqp4g4qh.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638581059&t=98f97e8f5573dac578029b849431123b">
  </div>
</body>
<script src="./js/jquery.js"></script>
<script>
  let $box = $('.box'),
    $img = $box.children('img'),
    $window = $(window)

  // 在页面加载和页面滚动时，加载图片
  $window.on("load scroll", function () {
    if ($img.attr('isLoad') === "true") return;  //如果img的自定义属性isLoad的值为"true",那么直接return出去，不往下执行
    let $imgTop = $box.outerHeight() + $box.offset().top    //图片距离页面顶部的高度
    let $scrollTop = $window.outerHeight() + $window.scrollTop()    //页面滚动的高度
    if ($imgTop <= $scrollTop) {
      // 如果图片距离页面顶部的高度小于等于页面滚动的高度，那么图片就加载
      // 获取img标签的自定义属性的值，赋值给src属性
      $img.attr("src", $img.attr("data-img"))
      $img.on('load', function () {
        // 设置为淡入效果
        $img.fadeIn()
      })
      // 不管成不成功，都给img标签设置自定义属性isLoad，值为true=>attr存储的都是字符串格式
      $img.attr('isLoad', true)
    }
  })
</script>

</html>